<template>
  <div>
    <div class="bg-white grid-content">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">

        <el-form-item label="日期:">
          <el-date-picker 
            v-model="searchForm.searchDate" 
            align="right" 
            type="date" 
            placeholder="请选择日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="站库:">
          <el-select v-model="searchForm.zkid" placeholder="请选择站库ID">
            <el-option
              v-for="item in zkList"
              :key="item.zkid"
              :label="item.zkmc"
              :value="item.zkid"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="日期:">
          <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="query()">查询</el-button>
          <!-- <el-button type="success">下载</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-white grid-content">

      <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick">
        <el-tab-pane label="容器区" name="second">
          <!--容器区界面-->
          <el-table :data="rongqiquData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
            <el-table-column align="center" label="时间 " prop="sj"></el-table-column>
            <el-table-column 
                v-for="(itembt, index) in rongqiqu" 
                :key="index" 
                :label="itembt.tankName+itembt.tankType"
                align="center">
                <el-table-column v-if="itembt.tankType === '四合一'" align="center" label="液位">
                  <el-table-column align="center" label="油室">
                    <template slot-scope="scope">
                      {{ (rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType))?(rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType)).ywY:''}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="水室">
                    <template slot-scope="scope">
                      {{ (rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType))?(rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType)).ywS:''}}
                    </template>
                  </el-table-column>
              </el-table-column>
              <el-table-column v-if="itembt.tankType === '四合一'" align="center" label="温度">
                  <el-table-column align="center" label="油出口">
                    <template slot-scope="scope">
                      {{ (rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType))?(rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType)).ckwdY:''}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="水出口">
                    <template slot-scope="scope">
                      {{ (rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType))?(rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType)).ckwdS:''}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="加热段">
                    <template slot-scope="scope">
                      {{ (rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType))?(rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType)).jrdwd:''}}
                    </template>
                  </el-table-column>
              </el-table-column>

              <el-table-column v-if="itembt.tankType === '干燥器'" align="center" label="进口压力">
                <template slot-scope="scope">
                  {{ (rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType))?(rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType)).jkyl:''}}
                </template>
              </el-table-column>
              <el-table-column v-if="itembt.tankType === '干燥器'" align="center" label="出口压力">
                <template slot-scope="scope">
                  {{ (rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType))?(rongqiquData[scope.$index].sbs.find(item=>item.tankName+item.tankType === itembt.tankName+itembt.tankType)).ckyl:''}}
                </template>
              </el-table-column>
            </el-table-column>         
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="加热炉区" name="third">
          <!--加热炉区界面-->
          <el-table :data="jiareluquData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
            <el-table-column align="center" label="时间 " prop="sj"></el-table-column>
            <el-table-column 
                v-for="(itembt, index) in jiareluqu" 
                :key="index" 
                :label="itembt.sbid"
                align="center">
                <el-table-column align="center" label="水位">
                  <template slot-scope="scope">
                    {{ (jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid))?(jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid)).sw:''}}
                    <!-- {{ jiareluquData[scope.$index] }} -->
                    <!-- {{ jiareluquData[scope.$index].sbs[0].sw }} -->
                <!-- {{ scope.$index }}{{ index }}{{ record }} -->
                  </template>
                </el-table-column>
                <el-table-column align="center" label="压力">
                  <el-table-column align="center" label="进口">
                    <!-- {{ scope.$index }} -->
                    <template slot-scope="scope">
                      {{ (jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid))?(jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid)).rkyl:''}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="出口">
                    <template slot-scope="scope">
                     {{ (jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid))?(jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid)).ckyl:''}}
                    </template>
                  </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="温度">
                  <el-table-column align="center" label="进口">
                    <template slot-scope="scope">
                      {{ (jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid))?(jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid)).rkwd:''}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="出口">
                    <template slot-scope="scope">
                      {{ (jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid))?(jiareluquData[scope.$index].sbs.find(item=>item.sbid === itembt.sbid)).ckwd:''}}
                    </template>
                  </el-table-column>
              </el-table-column>
            </el-table-column>
          
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="机泵区" name="fourth">
          <!--机泵区界面-->
          <el-table :data="jibengquData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
            <el-table-column align="center" label="时间 " prop="sj"></el-table-column>
            <el-table-column 
                  align="center"
                  v-for="(itembt, index) in jibengqu" 
                  :key="index" 
                  :label="itembt.type">
                  <el-table-column 
                      align="center"
                      v-for="(itemc, index) in itembt.children" 
                      :key="index" 
                      :label="itemc.pumpName">      
                      <el-table-column align="center" label="管压">
                        <template slot-scope="scope">
                          {{ (jibengquData[scope.$index].sbs.find(item=>item.pumpId === itemc.pumpId))?(jibengquData[scope.$index].sbs.find(item=>item.pumpId === itemc.pumpId)).tubePressure:''}}
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="泵压">
                        <template slot-scope="scope">
                          {{ (jibengquData[scope.$index].sbs.find(item=>item.pumpId === itemc.pumpId))?(jibengquData[scope.$index].sbs.find(item=>item.pumpId === itemc.pumpId)).pumpPressure:''}}
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="电流">
                        <template slot-scope="scope">
                          {{ (jibengquData[scope.$index].sbs.find(item=>item.pumpId === itemc.pumpId))?(jibengquData[scope.$index].sbs.find(item=>item.pumpId === itemc.pumpId)).current:''}}
                        </template>
                      </el-table-column>        
                  </el-table-column>
              </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="气计量区" name="fifth">
          <!--气计量区界面-->
          <el-table :data="qijiliangquData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
     
            <el-table-column align="center" label="时间 " prop="sj"></el-table-column>
            <el-table-column  label="自产气计量" align="center">
              <el-table-column align="center" label="调后压力" prop="sbs[0].thykZcq">
              </el-table-column>
              <el-table-column align="center" label="底数" prop="sbs[0].dsZcq">
              </el-table-column>
              <el-table-column align="center" label="流量" prop="sbs[0].cqlGq">
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="干气计量">
              <el-table-column align="center" label="来气压力" prop="sbs[0].lqylGq">
              </el-table-column>
              <el-table-column align="center" label="调后压力" prop="sbs[0].thylGq">
              </el-table-column>
              <el-table-column align="center" label="底数" prop="sbs[0].dsGq">
              </el-table-column>
              <el-table-column align="center" label="流量" prop="sbs[0].cqlZcq">
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="进出站参数" name="sixth">
          <!--进出站参数-->
          <el-table :data="jinchuzhancanshuData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
            <el-table-column align="center" label="时间 " prop="sj"></el-table-column>
            <el-table-column  label="阀组间回油温度" align="center">
              <el-table-column align="center" label="汇管温度" prop="sbs[0].thykZcq">
              </el-table-column>
              <el-table-column align="center" label="汇管压力" prop="sbs[0].dsZcq">
              </el-table-column>
            </el-table-column>
            <el-table-column  label="掺水" align="center">
              <el-table-column align="center" label="掺水温度" prop="sbs[0].thykZcq">
              </el-table-column>
              <el-table-column align="center" label="底数" prop="sbs[0].dsZcq">
              </el-table-column>
              <el-table-column align="center" label="流量" prop="sbs[0].dsZcq">
              </el-table-column>
            </el-table-column>
            <el-table-column  label="外输出口 " align="center">
              <el-table-column align="center" label="外输温度" prop="sbs[0].thykZcq">
              </el-table-column>
              <el-table-column align="center" label="底数" prop="sbs[0].dsZcq">
              </el-table-column>
              <el-table-column align="center" label="流量" prop="sbs[0].dsZcq">
              </el-table-column>
            </el-table-column>
            <el-table-column  label="外输末点 " align="center">
              <el-table-column align="center" label="末点温度" prop="sbs[0].thykZcq">
              </el-table-column>
              <el-table-column align="center" label="末点压力" prop="sbs[0].thykZcq">
              </el-table-column>
              <el-table-column align="center" label="底数" prop="sbs[0].dsZcq">
              </el-table-column>
              <el-table-column align="center" label="流量" prop="sbs[0].dsZcq">
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="机泵运行记录" name="seventh">
          <!--机泵运行记录-->
          <el-table :data="yunxingjiluData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
            <el-table-column align="center" label="设备名称" prop="pumpName">
            </el-table-column>
            <el-table-column align="center" label="日运" prop="dailyProd">
            </el-table-column>
            <el-table-column align="center" label="一保" prop="yb">
            </el-table-column>
            <el-table-column align="center" label="二保" prop="eb">
            </el-table-column>
            <el-table-column align="center" label="三保" prop="sb">
            </el-table-column>
            <el-table-column align="center" label="月累" prop="yl">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="综合数据" name="eighth">
          <!--综合数据记录-->
          <el-table :data="zongheData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#909399'}">
            <el-table-column align="center" label="外输液量" prop="exportLiqVolDaily">
            </el-table-column>
            <el-table-column align="center" label="外输油量" prop="exportOilVolDaily">
            </el-table-column>
            <el-table-column align="center" label="外输含水" prop="wshs">
            </el-table-column>
            <el-table-column align="center" label="输液耗电" prop="syhd">
            </el-table-column>
            <el-table-column align="center" label="输油单耗" prop="sydh">
            </el-table-column>
            <el-table-column align="center" label="输油泵效" prop="sybx">
            </el-table-column>
            <el-table-column align="center" label="系统效率" prop="xtxl">
            </el-table-column>
            <el-table-column align="center" label="掺水耗电" prop="cshd">
            </el-table-column>
            <el-table-column align="center" label="阻垢剂量" prop="zgjl">
            </el-table-column>
            <el-table-column align="center" label="湿气总量" prop="sqzl">
            </el-table-column>
            <el-table-column align="center" label="干气总量" prop="gqzl">
            </el-table-column>
            <el-table-column align="center" label="吨油耗气" prop="dyhq">
            </el-table-column>
            <el-table-column align="center" label="综合耗电" prop="zhhd">
            </el-table-column>
            <el-table-column align="center" label="综合单耗" prop="zhdh">
            </el-table-column>
            <el-table-column align="center" label="油气比" prop="yqb">
            </el-table-column>
            <el-table-column align="center" label="掺水量" prop="csl">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import jczkApi from "@/api/jcsj/scgl/ztsj/zkjc";

import zkrqApi from "@/api/jcsj/scgl/ztsj/zkrqyxsj";
import zkjrApi from "@/api/jcsj/scgl/ztsj/zkjrsbscsj";
import zkbscApi from "@/api/jcsj/scgl/ztsj/zkbscyxsj";
import zkqtApi from "@/api/jcsj/scgl/ztsj/zkqtscyxsj";
import zkscApi from "@/api/jcsj/scgl/ztsj/zkscyxsj";

import moment from "moment";

export default {
  data() {
    return {
      currentDay:moment().format("YYYY-MM-DD"),
      //获取站库列表
      zkList: [],
      initZkid:'',
      activeName: 'second',

      searchForm: {
        searchDate:'',
        zkid:'',
      },

      //容器区数据
      rongqiqu:[],
      rongqiquData:[],

      //加热炉区数据
      jiareluqu:[],
      jiareluquData:[],

      //机泵区数据
      jibengqu:[],
      jibengquData:[],

      //气计量区数据
      qijiliangquData:[],


      //进出站参数数据
      jinchuzhancanshuData:[],

      //设备运行记录
      yunxingjiluData:[],

      //综合数据
      zongheData:[],


      // 总览数据
      tableData: [],


      //数据总条数
      total: 0,
      //当前页码
      pageNo: 1,
      // 分页数
      pageSize: 5,

      //时间快捷选择
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

    }
  },
  created() {
    this.searchZk();
    // console.log(this.zkList);
    // this.searchrqqBt(this.zkList[0].zkid);
    // this.searchjrlqBt(this.zkList[0].zkid);
    // this.searchjrlqData('2023-7-19',this.zkList[0].zkid);
   
  },
  mounted(){
    // console.log(this.initZkid);
  },
  methods: {
    //查询站库列表
    async searchZk() {
      //发送查询请求
      let res = await jczkApi.getList({ pageNo: -1, pageSize: -1 });
      //   let ans = await jcbApi.getList({ pageNo: -1, pageSize: -1 });
      //判断是否成功
      if (res.success) {
        console.log(res.data.records);
        //赋值
        this.zkList = res.data.records;
        // this.initZkid = res.data.records[0].zkid
        // console.log(this.initZkid);
        // this.jcbList = ans.data.records;
        //总数量
        this.searchrqqBt(this.zkList[0].zkid);
        this.searchjrlqBt(this.zkList[0].zkid);
        this.searchbBt(this.zkList[0].zkid);
        this.searchrqData(this.currentDay,this.zkList[0].zkid);
        this.searchjrlqData(this.currentDay,this.zkList[0].zkid);
        this.searchbData(this.currentDay,this.zkList[0].zkid);
        this.searchqjlqData(this.currentDay,this.zkList[0].zkid);
        this.searchyxjlData(this.currentDay,this.zkList[0].zkid);
        this.searchzhData(this.currentDay,this.zkList[0].zkid);
      }
    },
    //查询事件
    query(){
      console.log(this.searchForm.searchDate+this.searchForm.zkid)
      if(this.searchForm.searchDate === '' || this.searchForm.searchDate === null ){
        this.searchForm.searchDate = this.currentDay 
      }
      if(this.searchForm.zkid == ''){
        this.searchForm.zkid = this.zkList[0].zkid
      }

      this.searchrqqBt(this.searchForm.zkid);
      this.searchjrlqBt(this.searchForm.zkid);
      this.searchbBt(this.searchForm.zkid);
      this.searchrqData(this.searchForm.searchDate,this.searchForm.zkid);
      this.searchjrlqData(this.searchForm.searchDate,this.searchForm.zkid);
      this.searchbData(this.searchForm.searchDate,this.searchForm.zkid);
      this.searchqjlqData(this.searchForm.searchDate,this.searchForm.zkid);
      this.searchyxjlData(this.searchForm.searchDate,this.searchForm.zkid);
      this.searchzhData(this.searchForm.searchDate,this.searchForm.zkid);
    },

    //容器区
    async searchrqqBt(zkid){
      //发送查询请求
      let res = await zkrqApi.getList({pageNo:-1,pageSize:-1,zkid:zkid,isRepeat:1});
        //判断是否成功
        if (res.success) {
          console.log(res.data); 
          // //赋值
          this.rongqiqu = res.data.records;
        }
    },
    async searchrqData(currentDate,zkid){
      //发送查询请求
      let res = await zkrqApi.getDataList({currentDate:currentDate,zkid:zkid});
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.rongqiquData = res.data;
        }
    },

    //加热炉
    async searchjrlqBt(zkid){
      //发送查询请求
      let res = await zkjrApi.getList({pageNo:-1,pageSize:-1,zkid:zkid,isRepeat:1});
        //判断是否成功
        if (res.success) {
          console.log(res.data); 
          // //赋值
          this.jiareluqu = res.data.records;
        }
    },
    async searchjrlqData(currentDate,zkid){
      //发送查询请求
      let res = await zkjrApi.getDataList({currentDate:currentDate,zkid:zkid});
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.jiareluquData = res.data;
        }
    },

    //泵
    async searchbBt(zkid){
      //发送查询请求
      let res = await zkbscApi.getBtList({pageNo:-1,pageSize:-1,zkid:zkid});
        //判断是否成功
        if (res.success) {
          console.log(res.data); 
          // //赋值
          this.jibengqu = res.data;
        }
    },
    async searchbData(currentDate,zkid){
      //发送查询请求
      let res = await zkbscApi.getDataList({currentDate:currentDate,zkid:zkid});
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.jibengquData = res.data;
        }
    },

    //气计量区
    async searchqjlqData(currentDate,zkid){
      //发送查询请求
      let res = await zkqtApi.getQtList({currentDate:currentDate,zkid:zkid});
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.qijiliangquData = res.data;
          this.jinchuzhancanshuData = res.data;
        }
    },

    //机泵运行记录
    async searchyxjlData(currentDate,zkid){
      //发送查询请求
      let res = await zkqtApi.getJbList({currentDate:currentDate,zkid:zkid});
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.yunxingjiluData = res.data;
        }
    },

    //综合
    async searchzhData(currentDate,zkid){
      //发送查询请求
      let res = await zkscApi.getList({currentDate:currentDate,zkid:zkid});
        //判断是否成功
        if (res.success) {
          console.log(res.data);
          // //赋值
          this.zongheData = res.data.records;
        }
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      //将每页显示的数量交给成员变量
      // this.search(this.pageNo, val);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.pageNo = val;
      //调用查询方法
      // this.search(val, this.pageSize);
    },
    // 序号计算
    indexMethod (index) {
      // index默认在0开始，这里+1
      return index + 1 + (this.currentPage - 1) * this.pageSize
    },

    //Tab标签区域切换按钮事件
    handleMenuClick(tab, event){
      console.log(tab, event);
    }
  }
}
</script>

<style lang="scss" scoped>
// 标题
.mytitle {
  font-size: large;
  padding-left: 10px;
  margin-bottom: 16px;
  float: left;
}

//按钮组
.myButtons {
  float: right
}

//格子的样式
.bg-white {
  background: #ffffff;
}

.grid-content {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
  display: none;
}

.calendar ::v-deep .el-button-group::after {
  display: none;
}

// 分割线样式
.el-divider--horizontal {
  display: block;
  height: 2px;
  width: 100%;
  margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
  margin: 15px 10px 15px 10px;
}
</style>
